<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSI餐厅小筑 外卖网</title>
  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../assets/plugins/chartist-js/dist/chartist.min.css" rel="stylesheet">
  <link href="../assets/plugins/chartist-js/dist/chartist-init.css" rel="stylesheet">
  <link href="../assets/plugins/chartist-plugin-tooltip-master/dist/chartist-plugin-tooltip.css" rel="stylesheet">
  <link href="../assets/plugins/morrisjs/morris.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/colors/blue.css" id="theme" rel="stylesheet">
  <!-- react -->
  <script src="../build/react.development.js"></script>
  <script src="../build/react-dom.development.js"></script>
  <script src="../build/babel.min.js"></script>
  <script src="../config.js"></script>
</head>

<body class="fix-header card-no-border logo-center">
  <div class="preloader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
  </div>
  <div id="main-wrapper">
    <!-- ============================================================== -->
    <!-- Topbar header - style you can find in pages.scss -->
    <!-- ============================================================== -->
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-collapse">
          <div class="navbar-nav mr-auto mt-md-0">
            <div class="nav-item"> <a class="navbar-brand" href="https://github.com/LimonSea/CSI-takeout-Course-design-project"><img src="../assets/images/logo.png"
                  class="light-logo" alt="homepage" /></a> </div>
          </div>
          <ul class="navbar-nav my-lg-0">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false"><img src="../assets/images/users/7.jpg" alt="user"
                  class="profile-pic" /></a>
              <div class="dropdown-menu dropdown-menu-right scale-up">
                <ul class="dropdown-user">
                  <li>
                    <div class="dw-user-box">
                      <div class="u-img"><img src="../assets/images/users/7.jpg" alt="user"></div>
                      <div class="u-text">
                        <h4>admin</h4>
                      </div>
                    </div>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#"><i class="mdi mdi-book-open-variant"></i>菜系管理</a></li>
                  <li><a href="meal-list.html"><i class=" mdi mdi-clipboard-text"></i>菜品管理</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="admin-order-list.html"><i class="mdi mdi-cart-outline"></i> 订单管理</a>
                  </li>
                  <li role="separator" class="divider"></li>
                  <li><a href="user-list.html"><i class="mdi mdi-account-star-variant"></i> 用户管理</a>
                    <ul id>
                      <li><a href="user-list.html">普通用户</a></li>
                      <li><a href="admin-list.html">管理员</a></li>
                    </ul>
                  </li>
                  <li><a href="login.html"><i class="fa fa-power-off"></i>退出登录</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </header>
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <nav class="sidebar-nav">
          <ul id="sidebarnav">
            <li> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i
                  class="mdi mdi-book-open-variant"></i><span class="hide-menu">菜系管理</span></a>
            </li>
            <li class="three-column"> <a class="has-arrow waves-effect waves-dark" href="meal-list.html"
                aria-expanded="false"><i class="mdi mdi-clipboard-text"></i><span class="hide-menu">餐品管理</span></a>
            </li>
            <li class="two-column"> <a class="has-arrow waves-effect waves-dark" href="admin-order-list.html"
                aria-expanded="false"><i class="mdi mdi-cart-outline"></i><span class="hide-menu">订单管理</span></a>
            </li>
            <li class="nav-small-cap">FORMS, TABLE &amp; WIDGETS</li>
            <li class="two-column"> <a class="has-arrow waves-effect waves-dark" href="add-user.html"
                aria-expanded="false"><i class="mdi mdi-account-star-variant"></i><span
                  class="hide-menu">用户管理</span></a>
              <ul aria-expanded="false" class="collapse">
                <ul>
                  <li><a href="user-list.html">普通用户</a></li>
                </ul>
                <ul>
                  <li><a href="admin-list.html">管理员</a></li>
                </ul>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </aside>
    <!-- 菜系列表的组件 -->
    <div class="page-wrapper" id="mealtype">

    </div>
  </div>
  </div>
  </div>
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <!-- Bootstrap tether Core JavaScript -->
  <script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
  <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <!-- slimscrollbar scrollbar JavaScript -->
  <script src="js/jquery.slimscroll.js"></script>
  <!--Wave Effects -->
  <script src="js/waves.js"></script>
  <!--Menu sidebar -->
  <script src="js/sidebarmenu.js"></script>
  <!--stickey kit -->
  <script src="../assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
  <script src="../assets/plugins/sparkline/jquery.sparkline.min.js"></script>
  <!--Custom JavaScript -->
  <script src="js/custom.min.js"></script>
  <!-- Footable -->
  <script src="../assets/plugins/footable/js/footable.all.min.js"></script>
  <script src="../assets/plugins/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
  <!--FooTable init-->
  <script src="js/footable-init.js"></script>
  <!-- ============================================================== -->
  <!-- Style switcher -->
  <!-- ============================================================== -->
  <script src="../assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
  <script type="text/babel">
    // 显示所有菜系列表
    class Mealtype extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          mealtypes: [
              // {
              //     typeid:'1',
              //     typename:'川菜'
              // }
          ]
        }
      }
      componentDidMount() {
          // 获取菜系列表
          const that = this
          $.ajax({
              type: 'GET',
              async: false,
              url: global.targetUrl + 'getmealtypelist',
              headers: {
                  token: localStorage.token 
              },
              data: {
                  'currentpage': 0,
                  'state':1
              },
              success: function (res) {
                  console.log('返回的',res)
                  if (res.resultMsg.code === 1000) {
                      let num = res.bean.totalpage
                      let mealtypes = res.bean
                      for (let i = 1; i < num; i++) {
                          $.ajax({
                              type: 'GET',
                              async: false,
                              url: global.targetUrl + 'getmealtypelist',
                              headers: {
                                  token: localStorage.token 
                              },
                              data: {
                                  'currentpage': i
                              },
                              success: function (ress) {
                                  console.log('分页 ', ress)
                                  if (ress.resultMsg.code === 1000) {
                                      mealtypes = mealtypes.concat(ress.bean.pojo)
                                  }
                              }
                          })
                      }
                      that.setState({
                          mealtypes: mealtypes
                      })
                  }
              }
          })

      }
      delete (typeid){
          console.log('typeid:',typeid)
          // 根据mealtypeid删除菜系
          const that = this;
          $.ajax({
              type: 'POST',
              url: global.targetUrl + 'manager/updatemealtype',
              headers: {
                  token: localStorage.token 
              },
              data: {
                  'typeid': typeid
              },
              success: function (res) {
                  console.log('请求删除',res)
                  if (res.resultMsg.code === 1000) {
                      that.componentDidMount()
                  }
              },
              error:function(){
                  console.log("接收失败！")
              }
          })

      }
      render() {
          return (
              <div className="container-fluid">
              <div className="row">
                  <div className="col-12">
                      <div className="card">
                          <div className="table-responsive">
                              <table id="demo-foo-addrow" className="table m-t-30 table-hover contact-list"
                                  data-page-size="10">
                                  <thead>
                                      <tr>
                                          <th>序号</th>
                                          <th>菜系名称</th>
                                          <th>编辑</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                          {
                                              this.state.mealtypes.map(item => {
                                                  return (
                                                      <tr key={item.typeid}>
                                                          <td className="xuhao">{item.typeid}</td>
                                                          <td>{item.typename}</td>
                                                          <td>
                                                              <a href={'manager-mealtype.html?typeid='+item.typeid+'&typename='+item.typename}> 编辑</a>
                                                          </td>
                                                      </tr>
                                                  )
                                              }
                                              )
                                          }
                                  </tbody>
                                  <tfoot>
                                      <tr>
                                          <td colSpan="2">
                                                  <a href="add-mealtype.html"><button type="button" className="btn btn-info btn-rounded" >添加</button></a>
                                          </td>
                                          <td colSpan="7">
                                              <div className="text-right">
                                                  <ul className="pagination"> </ul>
                                              </div>
                                          </td>
                                      </tr>
                                  </tfoot>
                              </table>
                          </div>
                      </div>
                  </div>
              </div>
              </div>
          )
        }
      }
      
      ReactDOM.render(
          <Mealtype />,
          document.getElementById('mealtype')
      )
    </script>
</body>

</html>